#scrollView {
    width: 320px;
    height: 300px;
    /*上下边距是为了演示当滚动到顶部或底部时，继续滚动鼠标滚轮会滚动整个页面*/
    margin: 100px 0;
    display: flex;
}

#scrollContent {
    width: 300px;
    height: 300px;
    padding-left: 8px;
    background-color: antiquewhite;
    /*隐藏超出滚动内容区域的元素*/
    overflow: hidden;
}

#scrollTrack {
    width: 20px;
    height: 300px;
    background-color: cadetblue;
    display: flex;
    /*竖着排列滚动条区域内的上下按钮、滑块等元素*/
    flex-direction: column;
}

#btnUp, #btnDown {
    height: 20px;
    background-color: brown;
}

#scrollBar {
    height: 50px;
    background-color: darkblue;
}

#trackDown {
    /*让大幅度向下滚动点击区域占据排列完其他元素后剩下的所有区域*/
    flex-grow: 1;
}

/*当拖动滑块时，给body元素加上该类，防止鼠标的拖动导致网页内容的选择操作*/
.unselectable {
    /*当前版本的火狐（53）和Edge（15）不支持user-select标准属性，需要使用浏览器厂商前缀*/
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}